<template>
	<view class="pay">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="新增缴费" :autoBack="true">
			</u-navbar>
		</view>
		<view class="con-body wrap">
			<!-- 新增缴费 -->
			<view class="uni-flex-center" style="width: 98%; margin-left: 1%;">
				<view class="title">
					<view style="float: left; margin-left: 20rpx;">
						<u-icon name="https://resourse.cnlhjt.com/upload/20220825/09ef61e02f199512a3aef4f9a8ae2f7b.png" size="22" label="车位费"></u-icon>
					</view>
					<view style="float: right;margin-right: 20rpx;">
						<u-icon name="map" size="18" label="兰州"></u-icon>
					</view>

				</view>
				<view style="clear: both;"></view>
				<view class="main-service uni-cell-90">

					<view class="user-list">
						<view class="user-list-cell">

							<view
								style="width: 100%; background-color: #FFFFFF; border-radius: 15rpx;padding-bottom: 20rpx; margin-top: 20rpx;">
								<u-cell-group :border="false">
									<u-cell icon="https://resourse.cnlhjt.com/upload/20220825/651206a7d0688d69f6448bb5c016854c.png" :title="house"
										:border="false" isLink></u-cell>
										<u-cell icon="https://resourse.cnlhjt.com/upload/20220825/4eeb13b0629adcc9e6f79c2218504b95.png" :title="car"
											:border="false" isLink></u-cell>
								</u-cell-group>

								<u-gap height="10" bgColor="#eeeeee"></u-gap>
								<view style="margin-top: 15rpx; margin-left: 15rpx;">
									代缴费用
								</view>
								<view v-for="(item, index) in myFee" style="border: 1rpx solid #E1E1E1; padding: 20rpx; margin-top: 20rpx; border-radius: 20rpx;">
									<view style="padding-bottom: 20rpx;">

										<u-checkbox-group>
											<text style="width: 90%; color: #999999;">{{item.start}}至{{item.end}}</text>
											<u-checkbox v-model="checked" shape="circle"></u-checkbox>
										</u-checkbox-group>
									</view>
									<u-line dashed></u-line>
									<view style="width: 100%; padding-top: 20rpx;">
										<text style="width: 90%; color: #666666;">{{item.title}}</text>
										<text style="color: red; margin-left: 63%">{{item.fee}}</text>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="width: 90%;margin-left: 5%;margin-top: 20rpx;margin-bottom:30rpx;">

				<u-button type="success" :customStyle="btnStyle" shape="circle">下一步</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnStyle: {
					width: '94%',
					marginLeft: '3%',
					borderRadius: '40rpx',
					marginTop: '100rpx',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF'
				},
				house: '龍舟壹号院10号楼1单元401',
				car: 'A-015',
				myFee: [{
						start: '2021-02-22',
						end: '2021-03-22',
						title: '车位服务费',
						fee: '80.00'
					},
					{
						start: '2021-02-22',
						end: '2021-03-22',
						title: '车位服务费',
						fee: '80.00'
					},
					{
						start: '2021-02-22',
						end: '2021-03-22',
						title: '车位服务费',
						fee: '80.00'
					},
					{
						start: '2021-02-22',
						end: '2021-03-22',
						title: '车位服务费',
						fee: '80.00'
					}
				]
			}
		}
	}
</script>

<style lang="scss">
	.title {
		margin-top: 40rpx;
		justify-content: space-between;
	}

	.l_title {
		font-size: 26rpx;
		color: #999999;
		margin-top: 15rpx;
	}

	.d_content {
		font-size: 32rpx;
		margin: 15rpx 10rpx 30rpx 10rpx;

	}
</style>
